<template>
  <div>
    <el-card style="margin:20px;padding:20px;">
      <el-form>
        <el-form-item label="图片标题">
          <el-input placeholder="图片标题" v-model="banner.bannerTitle"></el-input>
        </el-form-item>
        <el-form-item >
          <!-- 头衔缩略图 -->
          <pan-thumb v-if="banner.bannerUrl" :image="banner.bannerUrl"/>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imageCropperShow=true">
            上传轮播图
          </el-button>
          <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调
            <input type="file" name="file"/>
          -->
          <image-cropper
              v-show="imageCropperShow"
              :width="300"
              :height="300"
              :key="imageCropperKey"
              :url="BASE_API"
              field="file"
              @close="close"
              @crop-upload-success="cropSuccess"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitBanner">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: "add",
  data() {
    return {
      banner:{},
      //控制图片缩略图是否显示
      imageCropperShow: false,
      //上传组件的唯一标识
      imageCropperKey: 0,
      //服务器的地址与端口号
      BASE_API: 'http://localhost:8001/cykj/fileOss',
    }
  },
  methods: {
    //头像上传成功的回调的方法
    cropSuccess(data) {
      this.$message.success("上传成功")
      this.imageCropperShow = false
      //上传之后接口返回图片地址
      this.banner.bannerUrl = data.url
      this.imageCropperKey = this.imageCropperKey + 1
    },
    //关闭文件上传弹窗的方法
    close() {
      this.imageCropperShow = false
      //上传组件初始化
      this.imageCropperKey = this.imageCropperKey + 1
    },
    //提交轮播图
    async submitBanner(){
      if(!this.banner.bannerUrl) return  this.$message.error("请先上传图片")
    let result = await this.$http.banner.reqAddBanner(this.banner)
      if(result.code !== 200) return this.$message.error("轮播图上传失败")
      this.$message.success("播图上传成功")
      this.banner={}
      this.$router.push("/banner/manage")
    }
  },
  components: {
    ImageCropper,
    PanThumb
  },
}
</script>

<style scoped>

</style>